﻿<!--ApplyForm  申请单 Vue组件 -->
<!--X-Template 组件模板-->
<script type="text/x-template" id="apply-form-tempalte">
    <div class="apply-form-container">
        <div class="apply-form-title">
            <el-badge  type="info" :value="applyForms.length" >申请单</el-badge>
        </div>
        <div class="table-container" v-if="applyForms.length>0">
            <table border="1" cellspacing="0" cellpadding="8" style="width:100%;border-collapse:collapse;">
                    <tbody v-for="(item,index) in applyForms" :key="item.applyNumber">
                            <tr>
                                <td class="td-label">申请单号</td>
                                <td class="td-value" colspan="2">{{item.applyNumber}}</td>
                                <td class="td-label">申请科室</td>
                                <td class="td-value">{{item.applyDepartmentName}}</td>
                                <td class="td-label">申请医生</td>
                                <td class="td-vlaue">{{item.applyDoctorName}}</td>
                            </tr>
                            <tr>
                                <td class="td-label">姓名</td>
                                <td class="td-value" colspan="2">{{item.name}}</td>
                                <td class="td-label">姓别</td>
                                <td class="td-value">{{item.sex}}</td>
                                <td class="td-label">年龄</td>
                                <td class="td-value">{{item.age}}</td>
                            </tr>
                            <tr v-if="item.phoneNumber || item.address">
                                <td class="td-label">联系电话</td>
                                <td class="td-value" >{{item.phoneNumber}}</td>
                                <td class="td-label">地址</td>
                                <td class="td-value" colspan="4" >{{item.addrress}}</td>
                            </tr>
                             <tr>
                               <td class="td-lable">设备类型</td>
                               <td class="td-value" colspan="2">{{item.DeviceTypeName}}</td>
                               <td class="td-label">缴费状态</td>
                               <td class="td-value" colspan="3" >{{item.isPayment?'已缴费':'未付款' }}</td>
                            </tr>
                            <tr>
                               <td class="td-label">检查项目</td>
                               <td class="td-value" colspan="6" >{{item.ExamItems}}</td>
                            </tr>
                            <tr v-if="item.ClinicalDiagnosis" >
                               <td class="td-label">临床诊断</td>
                               <td class="td-value" colspan="6">{{item.ClinicalDiagnosis}}</td>
                            </tr>
                            <tr v-if="item.sex==='女'">
                                <td class="td-label">末次月经日期</td>
                                <td class="td-value" v-bind:colspan="item.IsPregnancy?2:6" >{{item.lastMenstruationDate}}</td>
                                <td class="td-label" v-if="item.IsPregnancy">孕周</td>
                                <td class="td-value" v-if="item.IsPregnancy">{{item.gestationalWeek}}</td>
                                <td class="td-label" v-if="item.IsPregnancy">预产期</td>
                                <td class="td-value" v-if="item.IsPregnancy">{{item.childbirthDate}}</td>
                            </tr>
                    </tbody>
            </table>
        </div>
    </div>
</script>
<script>
    var ApplyFormComponent={
        props:{ // 组件属性
             selectedItems:Array
        },
        template:'#apply-form-tempalte', // 对应模板
        watch:{
            selectedItems:function(){
                var cvm = this;
                cvm.loadData();
            }
        },
        data:function(){
            return {
               applyForms:[]
            };
        },
        methods:{
            loadData(){
                var cvm =this;
                var idList = cvm.selectedItems.map(i=>i.id);
                if(cvm.selectedItems.length>0){
                         abp.ajax({
                                type:'post',
                                url:'/api/manual-appoint/get-seleted-appy-form-list',
                                data:JSON.stringify(idList)
                          }).then(res => {
                            if(res.code===0){
                                cvm.applyForms = res.data;
                            }
                         })
                }
            }
        },
        created(){
            var cvm = this;
            cvm.loadData();
        }
    }
</script>
<style>
    #apply-form-tempalte .apply-form-container{
        width:100%;
        display:flex;
        flex-direction:column;
        padding:15px 10px;
    }

        #apply-form-tempalte .apply-form-container .apply-form-title {
               width:100%;
               height:50px;
               max-height:50px;
               flex:0;
        }

        #apply-form-tempalte .apply-form-container .table-container{
              width:100%;
              flex:1;
        }

    .apply-form-title .el-badge .el-badge__content{
        top:0px !important;
    }
</style>
